<template>
    <div class="home">
        <van-popup
            v-model="suggestPopupVisible"
            closeable
            position="top"
            class="suggest-popup"
            @click-overlay="searchValue = ''"
        >
            <van-list
                class="suggest-list"
                v-model="suggestionLoading"
                finished-text="没有更多了"
                error-text="村里没通网？"
                :finished="suggestionFinish"
                :error="suggestionError"
            >
                <van-cell
                    v-for="suggestion in suggestions"
                    :key="suggestion"
                    :title="suggestion"
                    @click="onSuggest(suggestion)"
                />
            </van-list>
        </van-popup>


        <van-popup
            v-model="channelPopupVisible"
            closeable
            position="left"
            class="channel-popup"
        >
            <div class="mine">
                <div class="title">
                    我的频道：
                    <van-button
                        v-if="!editing"
                        round
                        plain
                        size="mini"
                        class="btn"
                        color="orange"
                        @click="editing = true"
                    >
                        编辑
                    </van-button>
                    <van-button
                        v-else
                        round
                        size="mini"
                        class="btn"
                        color="orange"
                        @click="onChannelEditFinish"
                    >
                        完成
                    </van-button>
                </div>
                <div class="list">
                    <div
                        class="list-item"
                        v-for="(channel, idx) in showingMyChannels"
                        :key="idx"
                    >
                        {{ channel.name }}
                        <div
                            v-if="editing"
                            class="close"
                            @click="onRemoveMyChannel(channel.id)"
                        >
                            <van-icon name="cross" color="white" size="12px" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="options">
                <div class="title">可选频道：</div>
                <div class="list">
                    <div
                        class="list-item"
                        v-for="channel in channelOptions"
                        :key="channel.id"
                        @click="onAddMyChannel(channel)"
                    >
                        + {{ channel.name }}
                    </div>
                </div>
            </div>
        </van-popup>

        <van-search
            v-model="searchValue"
            class="search"
            shape="round"
            background="rgb(39, 147, 255)"
            placeholder="搜索"
            @input="onGetSuggestions"
            @search="onSearch"
        />

        <div class="tab">
            <div class="tab-wrapper">
                <van-tabs
                    v-model="currentId"
                    @click="onDebounceTabChange"
                >
                    <van-tab
                        v-for="channel in channels"
                        :key="channel.id"
                        :title="channel.name"
                        :name="channel.id"
                    />
                </van-tabs>
            </div>
            <van-icon
                name="wap-nav"
                size="20"
                @click="openChannelsPopup"
            />
        </div>

        <div class="list-wrapper">
            <van-pull-refresh
                v-model="refreshing"
                @refresh="onRefresh"
            >
                <van-list
                    v-model="loading"
                    finished-text="没有更多了"
                    error-text="村里没通网？"
                    :finished="finished"
                    :error="error"
                    @load="onMore()"
                >
                    <van-cell
                        v-for="article in articles"
                        :key="article.art_id"
                        :to="`/detail?id=${ article.art_id }`"
                    >
                        <div class="title">
                            {{ article.title }}
                        </div>
                        <div class="img-list">
                            <div
                                v-for="(imgSrc, i) in article.cover.images"
                                :key="i"
                                class="img-wrapper"
                            >
                                <img :src="imgSrc" alt="">
                            </div>
                        </div>
                        <div class="info">
                            <div v-if="article.is_top" class="top is-top">置顶</div>
                            <div class="author">{{ article.aut_name }}</div>
                            <div class="comment-count">评论数:{{ article.comm_count }}</div>
                            <div class="time">{{ timestamp2fromNow(article.pubdate) }}</div>
                        </div>
                    </van-cell>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script src="./main.js"></script>

<style lang="less" scoped>
    @import url('./main.less');
</style>
